<template>
   <el-dialog
  title="修改状态"
  :visible.sync="dialogVisible"
  width="500px"
  custom-class="change-state"
  >
  <el-row>
      <el-col :span="19">
          <el-row class="state-item">
                账号正常，登录状态正常
          </el-row>
          <el-row class="state-item">
              账号锁定之后用户无法登录，可调整状态解锁
          </el-row>
          <el-row class="state-item">
              账号注销之后用户无法使用，历史信息仍然保留，可恢复
          </el-row>
      </el-col>
      <el-col :span="5">
            <el-radio-group v-model="state" size="small" >
                <el-radio-button label="1" type="success" >正常</el-radio-button>
                <el-radio-button label="2" type="success"  >锁定</el-radio-button>
                <el-radio-button label="3"  type="success" >注销</el-radio-button>
            </el-radio-group>
      </el-col>
  </el-row>
  <span slot="footer" class="dialog-footer">
    <el-button @click="close">关闭</el-button>
    <el-button type="primary" @click="save">保存</el-button>
  </span>
</el-dialog>
</template>
<script>
export default {
    name: 'ChangeState',
    props: {
        showDialog: {
            type: Boolean,
            default: false
        },
        states: {
            type: String,
            default: ''
        }
    },
    data () {
        return {
            dialogVisible: false,
            state: 2
        }
    },
    methods: {
        close () {
            this.dialogVisible = false
        },
        save () {

        }
    },
    watch: {
        'showDialog' (state) {
            if (state) {
                this.dialogVisible = true
            }
        },
        'dialogVisible' (state) {
            if (!state) {
                this.$emit('close')
            }
        }
    }
}
</script>
<style lang="less">
.change-state {
    .state-item {
        height: 44px;
        line-height: 30px;
        font-size: 14px;
    }
    .el-radio-group {
        text-align: right;
        .el-radio-button {
            margin-bottom: 10px;
        }
    }
}
</style>
